<template>
	<view class="content">
		<view class="container">
			<view class="vc-item" @click="clickUserInfo" style="padding-bottom: 20rpx;">
				<image :src="serverPlayerInfo.HeadImg" style="width:150rpx;height:150rpx;border-radius: 20rpx;" />
				<view class="myInfo">
					<view class="vc-item-NickName">{{ serverPlayerInfo.NickName }}</view>
					<view class="vc-item-title">(ID:{{ serverPlayerInfo.ServeNumber }})</view>
				</view>

				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>
		<view class="container">
			<view class="vc-item">
				<text class="vc-item-title">接单状态</text>
				<switch @change="isWorkChange" :checked="serverPlayerInfo.IsWork" style="transform:scale(0.9)" />
			</view>
			<!-- 	<view class="vc-item" @click.stop="navigateTo('schedule')">
				<text class="vc-item-title">我的日程</text>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view> -->
			<view class="vc-item" @click.stop="navigateTo('order')">
				<text class="vc-item-title">我的订单</text>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>

		<view class="container">
			<view class="vc-item" @click="navigateTo('photo')">
				<text class="vc-item-title">相册</text>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
			<view class="vc-item" @click="navigateTo('video')">
				<text class="vc-item-title">视频</text>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>

		<view class="container">
			<view class="vc-item" @click.stop="navigateTo('earnings')">
				<text class="vc-item-title">我的收益</text>
				<view class="input-text">￥{{ serverPlayerInfo.Balance }}</view>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
			<!-- <view class="vc-item" @click.stop="navigateTo('giftearnings')">
				<text class="vc-item-title">礼物收益</text>
				<view class="input-text">￥{{ serverPlayerInfo.GiftBalance }}</view>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view> 
			<view class="vc-item" @click.stop="navigateTo('gift')">
				<text class="vc-item-title">礼物记录</text>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>-->
			<view class="vc-item" @click.stop="navigateTo('comment')">
				<text class="vc-item-title">评价</text>
				<view class="input-text">{{ commentQty }}条</view>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>

		<view class="container">
			<view class="vc-item" @click="clickHourMoney">
				<text class="vc-item-title">价格</text>
				<text class="input-text">￥{{ serverPlayerInfo.HourlyWage }}{{ serverPlayerInfo.SeverPlayHourlyWageUnitStr }}</text>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
			<view class="vc-item" @click="clickWorkTime">
				<text class="vc-item-title">工作时间</text>
				<view class="work-time-container input-text">
					<view class="uni-input" style="margin-left: auto;">{{ serverPlayerInfo.BeginTime }}</view>
					<text class="interval">-</text>
					<view class="uni-input">{{ serverPlayerInfo.EndTime }}</view>
				</view>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
			<view class="vc-item" @click="showTagsPicker">
				<text class="vc-item-title">标签</text>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin } from '@/config/common.js';
import { updateServePlayer, getAppServePlayerInfo } from '@/constant/schedule.js';
import { getAppOnlineServePlayerCommentQty } from '@/constant/onlineServe.js';
export default {
	data() {
		return {
			serverPlayerInfo: {},
			customer_serverPlayerId: uni.getStorageSync('customerId'),
			commentQty: 0
		};
	},
	created: function() {},
	onShow: function(option) {
		if (isLogin()) {
			this.getServerPlayerInfo();
			this.comment_qty();
		} else {
			toLogin();
		}
	},
	methods: {
		clickUserInfo() {
			uni.navigateTo({
				url: '/packagePages/playercenter/info/index'
			});
		},
		navigateTo: function(val) {
			let url = '';
			switch (val) {
				case 'schedule':
					uni.navigateTo({
						url: './schedule/index'
					});
					break;
				case 'order':
					uni.navigateTo({
						url: './order/list'
					});
					break;
				case 'earnings':
					uni.navigateTo({
						url: '/packagePages/playercenter/earnings/index?balance=' + this.serverPlayerInfo.Balance
					});
					break;
				case 'giftearnings':
					uni.navigateTo({
						url: '/packagePages/playercenter/giftearnings/index?giftBalance=' + this.serverPlayerInfo.GiftBalance
					});
					break;
				case 'photo':
					uni.navigateTo({
						url: '/packagePages/playercenter/photos/index?servePlayerId=' + this.customer_serverPlayerId
					});
					break;
				case 'video':
					uni.navigateTo({
						url: '/packagePages/playercenter/videos/index?servePlayerId=' + this.customer_serverPlayerId
					});
					break;
				case 'gift':
					uni.navigateTo({
						url: '/packagePages/playercenter/giftrecord/index'
					});
					break;
				case 'comment':
					if (this.commentQty == 0) {
						return;
					}
					uni.navigateTo({
						url: '/packagePages/onlinePlay/evaluate/index?servePlayerId=' + this.customer_serverPlayerId
					});
					break;
				case 3:
					uni.navigateTo({
						url: '../auditing/index'
					});
					break;
			}
		},
		getServerPlayerInfo: async function() {
			let serverPlayer = await getAppServePlayerInfo({ servePlayerId: this.customer_serverPlayerId });
			this.serverPlayerInfo = serverPlayer;
			uni.setStorageSync('ServePlayer_UserInfo', JSON.stringify(serverPlayer));
		},
		updateServerPlayerInfo: async function() {
			let result = await updateServePlayer(this.serverPlayerInfo);
		},
		async comment_qty() {
			//评论数量
			if (this.customer_serverPlayerId) {
				let result = await getAppOnlineServePlayerCommentQty({
					servePlayerId: this.customer_serverPlayerId
				});
				this.commentQty = result;
			}
		},
		isWorkChange: function(current) {
			this.serverPlayerInfo.IsWork = current.detail.value;
			this.updateServerPlayerInfo();
		},
		clickHourMoney() {
			uni.navigateTo({
				url: '/packagePages/playercenter/info/edit/index?type=10&title=价格(小时)&key=HourlyWage&values=' + this.serverPlayerInfo.HourlyWage
			});
		},
		showTagsPicker: function() {
			const _that = this;
			uni.navigateTo({
				url:
					'/packagePages/playercenter/regist/choosetag/index?saveType=save&servePlayType=' +
					_that.serverPlayerInfo.ServePlayType +
					'&serveTagList=' +
					encodeURIComponent(JSON.stringify(_that.serverPlayerInfo.ServeTagList))
			});
		},
		clickWorkTime() {
			uni.navigateTo({
				url:
					'/packagePages/playercenter/info/edit/index?type=50&title=工作时间&key=WorkTime&values=' +
					this.serverPlayerInfo.BeginTime +
					'&values2=' +
					this.serverPlayerInfo.EndTime
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	background-color: $main-page-color;
	min-height: 100vh;
}
.container {
	margin-top: 30rpx;
}
.container:last-child {
	// background-color: #000;
	padding-bottom: 100rpx;
}
.header {
	position: relative;
	&-content {
		position: absolute;
		display: flex;
		flex-direction: column;
		top: 50rpx;
		left: 200rpx;
		width: 350rpx;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}

	.edit-icon {
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}

	&-bg {
		width: 100%;
		height: 300rpx;
	}

	&-img {
		width: 140rpx;
		height: 140rpx;
	}
}
.myInfo {
	display: inline-block;
	width: 500rpx;
	line-height: 35rpx;
	margin-top: 12.5rpx;
	margin-left: 20rpx;
	.vc-item-NickName {
		font-size: $main-text-size-40;
		color: $main-text-color-gray-33;
		margin-bottom: 20rpx;
	}
}
.vc-item {
	display: flex;
	align-items: center;
	font-size: $main-text-size-28;
	color: $main-text-color-gray-33;
	min-height: 90rpx;
	background-color: #fff;
	margin-bottom: 1px;
	padding-left: 30rpx;
	&-icon {
		margin-left: 24rpx;
		width: 36rpx;
		height: 36rpx;
		margin-right: 28rpx;
	}

	&-arrow {
		width: 15rpx;
		height: 27rpx;
		margin-right: 24rpx;
	}

	&-title {
		margin-right: auto;
	}
}

.zichan-container {
	margin-top: 10rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	font-size: 30rpx;
	&__header {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f5f6fd;
	}
	.zichan-icon {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	&__bottom {
		display: flex;
		justify-content: space-around;
		padding-bottom: 20rpx;
		margin-top: 20rpx;

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			border-right: 2rpx solid #f5f6fd;
			width: 33.3333%;
			.cost {
				color: $main-text-color-red;
			}
		}
	}
}
.message-container {
	position: absolute;
	top: 60rpx;
	right: 60rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	&-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
}
.input-text {
	text-align: right;
	color: $main-text-color-gray-33;
	padding-right: 30rpx;
	width: 500rpx;
}
textarea {
	height: inherit;
	position: inherit;
	min-height: 34rpx;
}
.work-time-container {
	display: flex;
	text-align: center;
	> picker {
		width: 245rpx;
	}
}
</style>
